<template>
  <div class="job-detail">
    <!-- 返回按钮 -->
    <div class="header-container">
      <div class="back-button-wrapper">
        <el-page-header @back="goBack" content="芯芯推荐" style="font-size: 15px;color: white">
        </el-page-header>
      </div>
    </div>

    <!-- 职位基本信息 -->
    <div class="job-basic-info" >
      <el-divider content-position="left">
        <b>职位基本信息</b>
      </el-divider>
      <div v-if="loading" class="loading">加载中...</div>
      <div v-else>
        <div class="job-status">
          <span class="status-label">岗位状态</span>
          <!-- 根据 jobInfo.statu 的值进行条件渲染 -->
          <span class="status-value" v-if="jobInfo.statu === 0">正常</span>
          <span class="status-value" v-else-if="jobInfo.statu === 1">关闭</span>
          <span class="status-value" v-else>未知状态</span>
        </div>
        <h1 class="job-title">{{ jobInfo.title }}</h1>   <!-- /*标题*/-->
        <div class="job-salary">
          <span class="salary-symbol"></span>
          <span class="salary-value">{{ jobInfo.wage }}</span><!-- 工资-->
        </div>
        <div class="job-info-row">
          <span class="info-label">工作地点：</span>
          <span class="info-value">{{ jobInfo.area }}</span>
        </div>
        <div class="job-info-row">
          <span class="info-label">所属公司：</span>
          <span class="info-value">{{ jobInfo.name }}</span>
        </div>
        <div class="job-info-row">
          <span class="info-label">公司领域：</span>
          <span class="info-value">{{ jobInfo.field }}</span>
        </div>
        <div class="job-info-row">
          <span class="info-label">经验要求：</span>
          <span class="info-value">{{ jobInfo.experience }}</span>
        </div>
        <div class="job-info-row">
          <span class="info-label">公司规模：</span>
          <span class="info-value">{{ jobInfo.scale }}</span>
        </div>
        <div class="job-info-row">
          <span class="info-label">福利描述：</span>
          <span class="info-value">{{ jobInfo.welfare }}</span>
        </div>
        <div class="job-info-row">
          <span class="info-label">职位详情：</span>
          <!-- 修改为链接 -->
          <a :href="jobInfo.detail" target="_blank" class="info-value">{{ jobInfo.detail }}</a>
        </div>
        <!-- 添加投递简历按钮 -->
        <div class="apply-button-wrapper">
          <el-button type="primary" @click="applyJob">投递简历</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 职位基本信息
      jobInfo: {
        title: '',
        area: '',
        name: '',
        field: '',
        wage: '',
        experience: '',
        scale: '',
        welfare: '',
        categorty: '',
        detail: '',
        statu: null
      },
      // 职位申请信息
      applicationInfo: {
        applicationId: 0,
        applicationDate: '',
        applicationDescription: '',
        applicationStatus: '',
        interviewDate: '',
        reviewer: '',
        reviewTime: '',
        reviewDescription: ''
      },
      qyCompanyId: '',
      // 加载状态
      loading: true,
      // 判断用户是否登录
      isLoggedIn: false,
      // 职位通过率
      passRate: 0
    }
  },
  created () {
    // 检查 cookie 中是否存在 token，判断用户是否登录
    this.isLoggedIn = this.$cookie.get('token') !== null
  },
  methods: {
    // 初始化数据
    init (id) {
      console.log(id, 'xx')
      this.qyCompanyId = id
      console.log(this.qyCompanyId, 'qyCompanyId')
      // 模拟初始化职位基本信息
      this.jobInfo = {}
      this.loading = true
      this.$http({
        url: this.$http.adornUrl(`/company/qycompany/info/${id}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.jobInfo.title = data.qyCompany.title
          this.jobInfo.area = data.qyCompany.area
          this.jobInfo.name = data.qyCompany.name
          this.jobInfo.field = data.qyCompany.field
          this.jobInfo.wage = data.qyCompany.wage
          this.jobInfo.experience = data.qyCompany.experience
          this.jobInfo.scale = data.qyCompany.scale
          this.jobInfo.welfare = data.qyCompany.welfare
          this.jobInfo.categorty = data.qyCompany.categorty
          this.jobInfo.detail = data.qyCompany.detail
          this.jobInfo.statu = data.qyCompany.statu
          // console.log('详情信息this.jobInfo' + JSON.stringify(this.jobInfo))
        }
        this.loading = false
      })
    },
    // 投递简历按钮点击事件处理函数
    applyJob () {
      if (!this.isLoggedIn) {
        this.$message.error('请先登录')
        return
      }
      // 请求获取通过率
      this.$http({
        url: this.$http.adornUrl(`/company/qycompany/passRate`), // 假设这是获取通过率的接口
        method: 'get',
        params: this.$http.adornParams({
          'qyCompanyId': this.qyCompanyId
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.passRate = data.passRate
          // 弹出确认对话框
          this.$confirm(`该职位的通过率为 ${this.passRate}%，是否确定投递？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 用户点击确定，发送投递请求
            this.$http({
              url: this.$http.adornUrl('/company/qycompany/delivery'),
              method: 'post',
              params: this.$http.adornParams({
                'id': this.$store.state.user.id,
                'qyCompanyId': this.qyCompanyId
              })
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.$message.success('投递成功！')
              } else {
                this.$message.error(data.msg || '投递失败，请稍后重试。')
              }
            }).catch(() => {
              this.$message.error('请求出错，请稍后重试。')
            })
          }).catch(() => {
            // 用户点击取消，不做处理
            this.$message.info('已取消投递。')
          })
        } else {
          this.$message.error(data.msg || '获取通过率失败，请稍后重试。')
        }
      }).catch(() => {
        this.$message.error('请求出错，请稍后重试。')
      })
    },
    // 返回上一页
    goBack () {
      this.$router.back()
    }
  }
}
</script>

<style scoped lang="scss">
.job-detail {
  padding: 20px;
  background-color: #f9f9f9;
}

.header-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color:black;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.back-button-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
}

.app-name {
  font-size: 18px;
  font-weight: bold;
  margin-right: 20px;
  color: white;
}

.job-basic-info {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: 60px;
  margin-bottom: 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.job-basic-info .job-status {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.job-basic-info .job-status .status-label {
  font-weight: bold;
  margin-right: 10px;
}

.job-basic-info .job-status .status-value {
  color: #00b38a;
}

.job-basic-info .job-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.job-basic-info .job-salary {
  font-size: 20px;
  color: #f60;
  margin-bottom: 15px;
}

.job-basic-info .job-info-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.job-basic-info .job-info-row .info-label {
  width: 100px;
  color: #999;
}

.job-basic-info .job-info-row .info-value {
  flex: 1;
}

.apply-button-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.loading {
  text-align: center;
  font-size: 18px;
  color: #999;
}
</style>
